<template>
	<view id="validateCode">
		<!-- 返回 -->
		<view class="header">
			<text
				class="iconfont icon-fanhui"
				@click="loginStore.changeDisplay('isValidateCode', false)"></text>
		</view>

		<view class="code">
			<text>验证您的手机</text>
			<text>
				请输入发送至
				<text class="phone">{{ loginStore.formatPhone }}</text>
				的 4 位验证码
			</text>

			<view class="codeInput">
				<!-- 验证码 -->
				<u-code-input
					v-model="code"
					mode="line"
					maxlength="4"
					size="130"
					fontSize="80"
					space="30"
					color="#2bdf9d"
					borderColor="#2bdf9d"
					focus
					bold
					@finish="codeFinish"></u-code-input>
			</view>
		</view>

		<!-- n秒后重新获取 -->
		<view class="hint">
			<button
				class="regain"
				:disabled="countDown !== 0"
				plain
				@click="regainHandler"
				v-show="countDown === 0">
				重新获取
			</button>
			<text v-show="countDown !== 0">
				<text class="iconfont icon-shalou"></text>
				{{ countDown }} 后重新获取
			</text>
		</view>
	</view>

	<!-- 提示 -->
	<u-toast ref="uToastRef"></u-toast>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
// store
import useLoginStore from '@/stores/login';
// API接口
import { captchaSent, captchaVerify, registerCellphone } from '@/modules/request';
import { debounce } from '@/modules/characteristic';

// 提示框
const uToastRef = ref();
// login 状态库
const loginStore = useLoginStore();
// 验证码
const code = ref();
// 倒计时最大时间和计时记录
const countDownMax = 30;
const countDown = ref<number>(countDownMax);

/**
 * 倒计时处理器
 */
const countDownHandler = () => {
	countDown.value = countDownMax;
	let timer = setInterval(() => {
		countDown.value -= 1;
		if (countDown.value < 0) {
			clearInterval(timer);
			countDown.value = 0;
		}
	}, 1000);
};
countDownHandler();

/**
 * 重新获取验证码 (这个方法进行了防抖优化)
 */
const regainHandler = debounce(async () => {
	const captchaSentRes = await captchaSent({ phone: loginStore.form.phone });
	if (captchaSentRes.code !== 200) {
		uni.showToast({
			title: captchaSentRes.message,
			icon: 'none',
			mask: true,
		});
		return;
	}

	countDownHandler();
});

// 监听验证码结果
const codeFinish = async (value: string) => {
	// 验证验证码
	const captchaReuslt = await captchaVerify({
		phone: loginStore.form.phone,
		captcha: value,
	});

	// 校验验证码
	if (captchaReuslt.message === '验证码错误') {
		uToastRef.value.show({
			type: 'error',
			icon: false,
			title: '失败主题',
			message: captchaReuslt.message,
			duration: 1000,
			iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
			complete() {
				code.value = '';
			},
		});
		return;
	}

	// 请求接口 - 手机号注册
	const result = await registerCellphone({
		...loginStore.form,
		value,
	});
	console.log(result);

	// 注册成功跳转页面
	if (result.code !== 200) {
		uToastRef.value.show({
			type: 'error',
			icon: false,
			title: '失败主题',
			message: '注册失败',
			duration: 1000,
			iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
		});
		return;
	}

	// 跳转页面
};
</script>

<style lang="scss" scoped>
@import './scss/vakudateCode.scss';
</style>
